<template>
    <div class="com-container">
        <!-- 饼图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { thousandsFormat } from '@/utils/tools';

@Component({
    name: 'PieChart',
})
// 饼图
export default class PieChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }
    mounted() {
        this.initChart();
    }

    initChart() {
        let _this = this;
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            tooltip: {
                trigger: 'item',
                confine: true,
                formatter: function(param) {
                    return (
                        param.marker +
                        '&nbsp' +
                        param.name +
                        '&nbsp' +
                        (thousandsFormat(param.data?.instructionNum) || '0') +
                        '笔' +
                        '&nbsp' +
                        (thousandsFormat(param.data?.formatValue) || '0')
                    );
                },
                position: 'top',
                backgroundColor: 'rgba(255,255,255,0.8)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0,0,0,.65)',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
            },
            // grid: {
            //     top: '0%',
            //     right: '%',
            //     left: '5%',
            //     bottom: '8%',
            // },
            legend: {
                show: this.data.showLegend,
                orient: 'vertical',
                icon: 'circle',
                // left: '76%',
                right: '5%',
                top: '25%',
                // bottom: '20%',
                itemHeight: 8, // 修改icon图形大小
                itemWidth: 8,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'rgba(0,0,0,.65)',
                },
                z: 1001,
                // selectedMode: false,
                tooltip: {
                    show: true,
                    // trigger: 'item',
                    // formatter: function(param) {
                    //     let data = _this.data.data.find(item => item.name === param.name);
                    //     return (
                    //         // param.marker +
                    //         // '&nbsp' +
                    //         data.name + '&nbsp' + (data?.instructionNum || '0') + '笔' + '&nbsp' + (data?.formatValue || '')
                    //     );
                    // },
                    backgroundColor: 'rgba(255,255,255,0.8)',
                    borderColor: 'rgba(0,0,0,0.1)',
                    textStyle: {
                        color: 'black',
                    },
                    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
                },
            },
            color: ['#5FB2FF', '#73E0FF', '#69FFED', '#96A0FF', '#F47B8F'],
            series: [
                {
                    type: 'pie',
                    // roseType: 'radius',
                    radius: '91%',
                    center: ['32%', '38%'],
                    data: [],
                    avoidLabelOverlap: true,
                    stillShowZeroSum: false,
                    minShowLabelAngle: 0.01,
                    labelLine: {
                        show: false,
                    },
                    top: '25%',
                    right: '1%',
                    left: '1%',
                    bottom: '1%',
                },
                {
                    type: 'pie',
                    radius: '91%',
                    // roseType: 'radius',
                    center: ['32%', '38%'],
                    data: [],
                    label: {
                        show: true,
                        color: 'rgba(0,0,0,.45)',
                        fontSize: 12,
                        position: 'center',
                        formatter: '暂无数据',
                    },
                    color: ['#5FB2FF'],
                    labelLine: {
                        show: false,
                    },
                    top: '25%',
                    right: '1%',
                    left: '1%',
                    bottom: '1%',
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        let that = this;
        this.chartInstance.on('legendselectchanged', function(params) {
            // 前面配置项没定义selected，需先定义，否则找不到对象会报错
            const dataOption = {
                legend: {
                    selected: {},
                },
            };
            dataOption.legend.selected[params.name] = true; // 相当于取消点击事件
            that.chartInstance.setOption(dataOption);
        });
    }
    updateChart(e) {
        let _this = this;
        const dataOption = {
            title: { show: !e.hasData },
            tooltip: e.tooltip,
            series: [{ data: this.handleShow(e.data), tooltip: e.singleTooltip }, { data: e.hasData ? [] : [{ label: '支持', value: '0' }] }],
            legend: e.legend,
            color: e.color,
        };
        this.chartInstance.setOption(dataOption);
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    // 根据数据动态显示label和labelLine
    handleShow(arr) {
        arr.forEach(item => {
            item.label = {
                show: (function() {
                    if (item.value == 0 || item.value == '') {
                        return false;
                    } else {
                        return false;
                    }
                })(),
            };
            item.labelLine = {
                show: (function() {
                    if (item.value == 0 || item.value == '') {
                        return false;
                    } else {
                        return false;
                    }
                })(),
                smooth: 0.2,
                length: 3,
                length2: 5,
            };
        });
        return arr;
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
